<template>
   <div class="page-container">
      <div ref="plantRef" class="container-charts">各地区种植面积统计TOP10</div>
    </div>
</template>

<script>
import {annular} from '../request/api'
export default {
    data(){
        return{
            seriesData:[]
        }
    },
    computed:{
        getTheme(){
            return this.$store.state.theme
        }
    },
    watch:{
        getTheme(){
            this.info.dispose()
            this.initChart()
            this.getData()
            this.screen()
        }
    },
    async mounted(){
        this.initChart()
        await this.getData()
        this.screen()
        window.addEventListener("resize",this.screen)
    },
    destroyed(){
        window.removeEventListener("resize",this.screen)
    },
    methods:{
        initChart(){
            let dom=this.$refs.plantRef
            let myChart=this.$echarts.init(dom,this.getTheme)
            this.info=myChart
            let options={
                title:{
                    text:"主要地区农作物种植区域占比"
                },
                series:this.seriesData
            }
            myChart.setOption(options)
        },
        async getData(){
            let res=await annular()
            let centerList=[
                ["20%","50%"],
                ["40%","50%"],
                ["60%","50%"],
                ["80%","50%"]
            ]
            console.log(res);
            this.seriesData=res.data.map((item,i)=>{
                return{
                    type:"pie",
                    center:centerList[i],
                    radius:[50,60],
                    label:{
                        show:true,
                        position:"center",
                        fontSize:20
                    },
                    data:[
                        {
                            name:item.areas+"\n"+item.zb+"%",
                            value:item.zb
                        },
                        {
                            value:item.other
                        }
                    ]
                }
            })
            this.info.setOption({
                series:this.seriesData
            })
        },
        screen(){
            this.info.resize()
            let width=this.$refs.plantRef.offsetWidth
            let num=(width/100)*3
            this.seriesData=this.seriesData.map((item)=>{
                return{
                    ...item,
                    radius:[num*1.6,num*1.2]
                }
            })
            let option={
                title:{
                    textStyle:{
                        fontSize:num
                    }
                },
                series:this.seriesData
            }
            this.info.setOption(option)
        }
    }
}
</script>

<style>

</style>